<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>
  <hr>
<!--  <div v-if="awesome">-->
  <!--
  <template v-if="awesome">
    <h1>Vue is awesome!</h1>
    <h1>Vue is awesome!</h1>
    <h1>Vue is awesome!</h1>
    <h1>Vue is awesome!</h1>
    <h1>Vue is awesome!</h1>
  </template>
  <template v-else>
    <h1>Oh no 😢</h1>
    <h1>Oh no 😢</h1>
    <h1>Oh no 😢</h1>
  </template>
  {{ awesome }}
  <button @click="awesome = !awesome">toggle awesome</button>
  -->

  <div v-if="type.toUpperCase() === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  <hr>
  <!--
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input key="1" placeholder="Enter your username">
  </template>
  <template v-else>
    <label>Email</label>
    <input key="2" placeholder="Enter your email address">
  </template>-->
  <div v-show="loginType === 'username'">
    <label>Username</label>
    <input key="1" placeholder="Enter your username">
  </div>
  <div v-show="loginType !== 'username'">
    <label>Email</label>
    <input key="2" placeholder="Enter your email address">
  </div>
  <br>
  <button @click="toggleLoginType">Toggle login type</button>
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    data: {
      loginType: "username",
      type: "",
      msg: "hello vue 条件渲染!",
      awesome: true
    },
    methods: {
      toggleLoginType() {
        if (this.loginType === "username") {
          this.loginType = !"username"
        } else {
          this.loginType = "username"
        }
      }
    }
  }).$mount("#app")
</script>

<!--
不会成为真实的标签
<template></template>

v-if=""
v-else-if=""
v-else


key: 这两个元素是完全独立的，不要复用它们


v-if vs v-show
v-if 是“真正”的条件渲染
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
-->

</body>
</html>
